<template>
  <div>
    <!-- 搜索栏 -->
    <div
      class="vsco"
      style="display: flex; justify-content: space-between; margin-bottom: 0px"
    >
      <!-- 搜索框+选项框 -->
      <div style="margin-bottom: 0px; display: flex">
        <!-- 搜索框 -->
        <el-input
          v-model="select"
          placeholder="搜索"
          clearable
          @focus="focusInput"
          @keyup.enter.native="handleInput"
          style="width: 200px; margin-bottom: 0px"
        ></el-input>
        <!-- 选项框 -->
        <template>
          <el-select
            v-model="value"
            placeholder="请选择"
            clearable
            @focus="focusSelect"
            style="margin: 0 10px; margin-bottom: 0px; width: 150px"
          >
            <el-option
              v-for="item in tableData"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </template>
        <!-- 查询按钮 -->
        <div style="">
          <el-button  type="primary" @click="handleFind(value)">查询</el-button>
        </div>
        <!-- 重置按钮 -->
        <div style="">
          <el-button type="info" style="margin: 0 10px;" @click="handleReset()">重置</el-button>
        </div>
      </div>
      <!-- 新增按钮 -->
      <div style="margin-bottom: 0px">
        <el-button type="success" @click="handleClick('add')">新增</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <template>
      <el-table
        :data="filteredData"
        :key="tableKey"
        border
        style="width: 100%"
        height="320"
      >
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="control" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleClick('view', scope.row)"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleClick('edit', scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 对话框 -->
    <el-dialog
      :title="drawerTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div style="display: flex; flex-direction: column">
        <div>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;date：
          <el-input
            style="width: 200px"
            v-model="collectDate"
            placeholder="请输入内容"
            clearable
            :disabled="disabledCont"
          >
          </el-input>
        </div>
        <div>
          &nbsp;&nbsp;&nbsp;&nbsp;name：
          <el-input
            style="width: 200px"
            v-model="collectName"
            placeholder="请输入内容"
            clearable
            :disabled="disabledCont"
          >
          </el-input>
        </div>
        <div>
          address：
          <el-input
            style="width: 300px"
            v-model="collectAddress"
            placeholder="请输入内容"
            clearable
            :disabled="disabledCont"
          >
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'tableCom',
  data () {
    return {
      tableData: [
        {
          id: 1,
          date: '2024-05-02',
          name: '朱小龙',
          address: '上海市静安区北京东路 3456 号'
        },
        {
          id: 2,
          date: '2023-11-14',
          name: '王小虎',
          address: '北京市朝阳区望京街 987 号'
        },
        {
          id: 3,
          date: '2022-01-01',
          name: '雷小翼',
          address: '广州市天河区珠江新城 678 号'
        },
        {
          id: 4,
          date: '2016-09-23',
          name: '莫小马',
          address: '深圳市南山区科技园路 321 号'
        },
        {
          id: 5,
          date: '2018-07-21',
          name: '李小雷',
          address: '北京市海淀区中关村大街 123 号'
        },
        {
          id: 6,
          date: '2021-03-15',
          name: '韩梅梅',
          address: '广州市越秀区中山五路 456 号'
        },
        {
          id: 7,
          date: '2019-11-05',
          name: '张小伟',
          address: '上海市浦东新区世纪大道 789 号'
        },
        {
          id: 8,
          date: '2020-09-10',
          name: '赵小敏',
          address: '成都市高新区天府软件园 101 号'
        }
      ],
      value: '',
      input: '',
      select: '',
      dialogVisible: false,
      drawerType: '', // add-添加、edit-修改、view-预览等类型
      collectDate: '',
      collectName: '',
      collectAddress: '',
      tableKey: 0, // 初始化 tableKey
      disabledCont: false,
      middle:'',// 中间值
      filteredData:[] //筛选之后的data
    }
  },
  props: {
    msg: { type: String, default: '' }
  },
  created() {
    this.filteredData = this.tableData;
  },
  methods: {
    // 处理新增、查看、编辑点击事件
    handleClick (type, row) {
      // 方法一：switch方法
      // console.log(type, row)
      // this.drawerType = type
      // this.dialogVisible = true
      // switch (type) {
      //   case 'add':
      //     this.disabledCont = false
      //     this.collectDate = ''
      //     this.collectName = ''
      //     this.collectAddress = ''
      //     break
      //   case 'view':
      //     this.disabledCont = true
      //     this.collectDate = row.date
      //     this.collectName = row.name
      //     this.collectAddress = row.address
      //     break
      //   default:
      //     this.disabledCont = false
      //     this.collectDate = row.date
      //     this.collectName = row.name
      //     this.collectAddress = row.address
      // }
      // 方法二：对象来映射操作
      console.log(type, row)
      this.drawerType = type
      this.dialogVisible = true
      this.handleAction(type, row)
    },
    // 对象映射Action处理点击事件
    //---------------//
    handleAction (type, row) {
      const actions = {
        add: () => {
          this.disabledCont = false
          this.resetFormData()
        },
        view: () => {
          this.disabledCont = true
          this.setFormData(row)
        },
        edit: () => {
          this.disabledCont = false
          this.setFormData(row)
        }
      }
      const action = actions[type]
      if (action) {
        action()
      } else {
        console.error(`Unhandled action type: ${type}`)
      }
    },
    setFormData (row) {
      this.formData = {
        date: row.date,
        name: row.name,
        address: row.address
      }
    },
    //---------------//
    // Dialog默认关闭方法
    handleClose (done) {
      done()
      this.resetForm()
    },
    // 对话框保存方法
    saveEdit () {
      if (this.drawerType === 'add') {
        // 添加新条目
        const newRow = {
          date: this.collectDate,
          name: this.collectName,
          address: this.collectAddress
        }
        this.tableData.push(newRow)
        this.resetForm()
      } else if (this.drawerType === 'edit') {
        // 编辑现有条目
        const index = this.tableData.findIndex(
          item => item.name === this.collectName
        )
        if (index !== -1) {
          this.tableData[index] = {
            date: this.collectDate,
            name: this.collectName,
            address: this.collectAddress
          }
          this.tableKey = Math.random()
          console.log('编辑成功，更新后的数据:', this.tableData[index])
        } else {
          console.error('未找到对应的条目进行编辑')
        }
        this.resetForm()
      }
      // 对于查看操作，不需要保存，所以这里不做处理
      this.dialogVisible = false
    },
    // 重置表单数据方法
    resetForm () {
      this.collectDate = ''
      this.collectName = ''
      this.collectAddress = ''
      this.disabledCont = false
    },
    // 查询按钮功能
    handleFind (value) {
      if(this.select){
        this.middle = this.select
      }else{
        this.middle = value
      }

    },
    focusSelect(){
      this.select = ''
    },
    focusInput(){
      this.value = ''
    },
  // 重置功能
    handleReset(){
      this.filteredData = this.tableData;
    },
  //  输入框搜索功能
    filterData(){
      if (this.select || this.value) {
        this.filteredData = this.tableData.filter((row) => {
          return Object.keys(row).some((key) => {
            return String(row[key]).toLowerCase().includes(this.middle.toLowerCase());
          });
        });
        console.log(this.filteredData[0].name)
      } else {
        this.filteredData = this.tableData;
      }
    }
  },
  watch: {
    middle(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.filterData();
      }
    }
  },
  computed: {
    // 计算属性控制标题
    drawerTitle () {
      let title = '大标题'
      if (this.drawerType === 'add') title = '添加内容'
      if (this.drawerType === 'view') title = '查看内容'
      if (this.drawerType === 'edit') title = '编辑内容'
      return title
    }
  }
}
</script>

<style lang="scss" scoped></style>
